<template>
    <div class="rate">
        <el-dialog
            :visible.sync="is_show"
            title="案件评分"
            center
            @closed="closed"
        >
            <el-form
                :rules="rules"
                :model="form"
                label-position="top"
                ref="form"
            >
                <el-form-item
                    label="服务态度"
                    prop="attitude"
                    label-width="120"
                >
                <template slot='label'>
                    <span>服务态度</span>
                    <el-popover
                        placement="right"
                        title="服务态度分"
                        width="200"
                        trigger="hover"
                        content="请您根据代理人与您交涉时的服务态度进行评分，评分越高代表您越满意!">
                        <i class='el-icon-info orange ml10' slot="reference"></i>
                    </el-popover>
                </template>
                    <el-rate
                        show-score
                        allow-half
                        v-model="form.attitude">
                    </el-rate>
                </el-form-item>
                <el-form-item
                    label="撰写质量"
                    prop="quelity"
                >
                <template slot='label'>
                    <span>撰写质量</span>
                    <el-popover
                        placement="right"
                        title="撰写质量分"
                        width="200"
                        trigger="hover"
                        content="请您根据代理人撰写案件的质量进行评分，评分越高代表您越满意!">
                        <i class='el-icon-info orange ml10' slot="reference"></i>
                    </el-popover>
                </template>
                    <el-rate
                        show-score
                        allow-half
                        v-model="form.quelity">
                    </el-rate>
                </el-form-item>
                <el-form-item
                    label="撰写耗时"
                    prop="take_time"
                >
                <template slot='label'>
                    <span>撰写耗时</span>
                    <el-popover
                        placement="right"
                        title="撰写耗时分"
                        width="200"
                        trigger="hover"
                        content="请您根据代理人撰写案件所耗时长进行评分，评分越高代表您越满意!">
                        <i class='el-icon-info orange ml10' slot="reference"></i>
                    </el-popover>
                </template>
                    <el-rate
                        show-score
                        allow-half
                        v-model="form.take_time">
                    </el-rate>
                </el-form-item>
                <!-- <el-form-item
                    label="评价"
                    prop="remark"
                    class="remark"
                >
                    <template slot='label'>
                        <span>评价</span>
                        <el-popover
                            placement="right"
                            title="评价"
                            width="200"
                            trigger="hover"
                            content="此条文字评价是匿名评价，代理人无法看到，请您放心提出您的宝贵意见，我们会及时按照您的意见进行改善及优化!">
                            <i class='el-icon-info orange ml10' slot="reference"></i>
                        </el-popover>
                    </template>
                    <el-input
                        :show-word-limit="true"
                        :maxlength="500"
                        :rows="4"
                        type="textarea"
                        placeholder="请输入您对案件代理人的评价"
                        v-model="form.remark">
                    </el-input>
                </el-form-item> -->
            </el-form>
            <template slot="footer">
                <el-button type="primary" v-no-more-click:5000 @click="submit">确认</el-button>
                <el-button @click="cancel">取消</el-button>
            </template>
        </el-dialog>
        <additionalRate ref='additionalRate' @refresh="refresh" type="1"/>

        <reward ref="reward"></reward>
    </div>
</template>

<script>
import additionalRate from "./additionalRate"
// 打赏
import reward from '~/pages/user/myApply/components/reward'
export default {
    components: {
        additionalRate,
        reward
    },
    data() {
        let check = (rule, value, callback) => {
            if (!value || value < 0.5) {
                return callback(new Error());
            } else {
                callback()
            }
        };
        return {
            is_show: false,
            order_id: null,
            order: null,
            form: {
                attitude: 0,
                quelity: 0,
                take_time: 0,
                // remark: null
            },
            rules: {
                attitude: [{required: true, validator: check, message: '请为服务态度评分，最低0.5分', trigger: 'change'}],
                quelity: [{required: true, validator: check, message: '请为案件撰写质量评分，最低0.5分', trigger: 'change'}],
                take_time: [{required: true, validator: check, message: '请为案件撰写耗时评分，最低0.5分', trigger: 'change'}]
            }
        }
    },

    methods: {
        showOn(data) {
            console.log(data)
            if (data.order) {
                this.order_id = data.order.id
            } else {
                this.order_id = data.id
            }

            this.order = data
            this.is_show = true
            this.$nextTick(() => {
                this.$refs["form"].clearValidate();
            });
        },
        cancel() {
            this.$confirm('确定离开此次评分吗？<br>稍后如需对订单进行评分，可在对应订单的查看详情页面中点击<span class="finish">案件评分</span>按钮对案件进行评分', '提示', {
                cancelButtonText: '继续评分',
                confirmButtonText: '我已知晓',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                this.is_show = false
            }).catch(

            )
        },
        refresh() {
            this.$emit('refresh')
            this.is_show = false
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.form))
                    let that = this
                    this.$axios.post(`/api/grades/${this.order_id}`, params).then(res => {
                        if (res.data.code == 200) {
                            this.$emit('refresh')
                            let grades = {
                                id: res.data.data.id,
                                quelity: res.data.data.quelity,
                                attitude: res.data.data.attitude,
                                take_time: res.data.data.take_time,
                            }
                            this.order.grades = grades
                            // 判断是否需要打赏
                            let average = (this.form.attitude + this.form.quelity + this.form.take_time) / 3
                            let message = '感谢您的评分，祝您生活愉快！是否追加评论？'
                            let cancelButtonText = '取消'
                            let data = this.order
                            this.$confirm(message, '提交成功', {
                                distinguishCancelAndClose: true,
                                center: true,
                                confirmButtonText: '追加评论',
                                cancelButtonText: cancelButtonText
                            }).then(() => {
                                this.$alert('该评价信息为匿名评价，代理人不可见', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        this.$refs['additionalRate'].show(this.order)
                                    }
                                })
                            }).catch(action => {
                                if (action === 'cancel') {
                                    if (average >= 4.5) {
                                        this.$confirm('感觉代理人不错的话打赏一下吧！', '提示', {
                                            distinguishCancelAndClose: true,
                                            center: true,
                                            confirmButtonText: '打赏',
                                            cancelButtonText: '取消'
                                        })
                                        .then(() => {
                                            that.$refs['reward'].show(data)
                                        })
                                        .catch(action => {
                                            that.is_show = false
                                        })
                                        
                                    }
                                }
                                this.is_show = false
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.message
                            })
                        }
                    })
                }
            })
        },
        closed() {
            Object.assign(this.$data, this.$options.data());
            this.$refs["form"].resetFields();
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    max-width: 500px;
    .el-form {
        .remark {
            .el-form-item__label {
                padding-left: 10px;
            }
        }
    }
    // .rate {
    //     .el-dialog {

    //     }
    // }
    // .infoIcon {

    // }
}
</style>
